<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>创建表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css" rel="stylesheet">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../static/css/login.css" />
    <link href="https://cdn.bootcss.com/zui/1.8.1/lib/datetimepicker/datetimepicker.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/zui/1.8.1/lib/datetimepicker/datetimepicker.min.js"></script>
</head>
<style>
    @media screen and (max-width:425px){
        .button-text {
        font-size: 11px;
    }
    }

</style>

<body>
    <div class="container-fluid" id="main_container">
        <div class="row" id="main_row">
            <div class="col-lg-4 col-lg-offset-4" id="main_form">
                <h1 style="text-align: center">创建表单（前端测试版）</h1>
                <hr>
                <div class="col-12" style="display:flex">
                    <div class="btn-group center-block"><button class="btn" id="input"><span class="button-text">添加输入框</span></button><button
                            class="btn" id="choice"><span class="button-text">添加单选框</span></button><button class="btn"
                            id="muti-choice"><span class="button-text">添加复选框</span></button><button class="btn" id="upload"><span
                                class="button-text">上传文件</span></button></div>
                </div>
                <br>
                <div class="input-group col-12">
                    <!-- <span class="input-group-addon">6位表单代码</span> -->
                    <input type="text" class="form-control input-lg" id="form-id" placeholder="六位表单代码">
                    <span class="input-group-addon"><button class="btn btn-primary" id="random">随机生成</button></span>
                </div>
                <hr>
                <form id="form" class="form-horizontal" style="margin:10px;" action="">
                    <div class="col-12" style="padding:10px;border: 1px dashed lightgrey" id="append"><span class="text-gray notice">表单编辑区</span><span><button
                                data-toggle="button" class="btn btn-mini btn-warning hide-control notice" id="hide-control">隐藏编辑控件</button></span></div>
                </form>
                <hr>
                <div>
                    <button type="button" data-position="center" data-toggle="modal" data-target="#myModal" disabled
                        class="btn btn-primary btn-lg btn-block disabled" id="sub">预览表格内容
                    </button>
                </div>
                <br>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">表格内容预览</h4>
                </div>
                <div class="modal-body">
                    <div id="form-preview">主题内容...</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" data-dismiss="modal" data-position="center" data-toggle="modal" data-target="#time-select" id="save" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="time-select">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">你已经创建好了你的表单，万事俱备！</h4>
                </div>
                <div class="modal-body">
                    <p>是时候选择一下表单的有效时间了:</p>
                    <input type="text" class="form-control form-datetime" placeholder="选择开始时间" readonly="readonly" id="timeStart">
                    <br>
                    <input type="text" class="form-control form-datetime" placeholder="选择结束时间" readonly="readonly" id="timeEnd">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submit()">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../static/js/form_create.js"></script>
<script src="../static/js/form_seralize.js"></script>

</html>